<script setup>
import { computed, nextTick, onMounted, ref, unref } from "vue";
import { useRouter } from "vue-router";

const { innerWidth, innerHeight } = window;
const key = ref("key");
const refMain = ref();
const isVertical = ref(true);
const router = useRouter();

const mainStyle = computed(() => {
  if (unref(isVertical)) {
    return [
      `width: ${innerHeight}px`,
      `height: ${innerWidth}px`,
      `transform: rotate(90deg) translate(0, -100%)`,
    ].join(";");
  }
  return [`width: ${innerHeight}px`, `height: ${innerWidth}px`].join(";");
});

function orientationChange() {
  isVertical.value = !unref(isVertical);
  nextTick(() => {
    key.value = `key${Date.now().toString(32)}`;
  });
}

onMounted(() => {
  const isOrientationChangeSupported =
    "orientation" in window && "onorientationchange" in window;
  isVertical.value = window.innerWidth < window.innerHeight;

  window.addEventListener(
    isOrientationChangeSupported ? "orientationchange" : "resize",
    orientationChange,
  );
});

function toPage(url) {
  location.assign(url);
}
</script>

<template>
  <div class="main" ref="refMain" :style="mainStyle" :key="key">
    <img src="/bg.jpg" alt="" class="bgImg" />
    <img src="/desc.png" alt="" class="descImg" />
    <img src="/sc.png" alt="" class="scImg" />
    <div
      class="box1 box"
      @click="
        toPage(
          'https://20919269-246.hd.webportal.top/20919269/WOQgG3rUVseOQmzXM1jBFw/load-20919269-246.html?style=85&editQrcode=true&_source=1',
        )
      "
    >
      <img src="/1.png" alt="飞花令" class="img1 imgBtn" />
    </div>
    <div class="box2 box" @click="router.push({ path: '/miss' })">
      <img src="/2.png" alt="摄影比赛" class="img2 imgBtn" />
    </div>
    <div class="box3 box" @click="router.push({ path: '/live' })">
      <img src="/3.png" alt="直播" class="img3 imgBtn" />
    </div>
    <div
      class="box4 box"
      @click="
        toPage(
          'https://28593175-89.kcyxhd.com/28593175/jAl_uAh6Qu_WN7hAXK_38w/load-28593175-89.html?style=134&editQrcode=true&_source=1',
        )
      "
    >
      <img src="/4.png" alt="切月饼游戏" class="img4 imgBtn" />
    </div>
    <div
      class="box5 box"
      @click="
        toPage(
          'https://20919269-235.hd.webportal.top/20919269/WOQgG3rUVsfOYNmrgTtpbw/load-20919269-235.html?style=88&editQrcode=true&_source=1',
        )
      "
    >
      <img src="/5.png" alt="团圆" class="img5 imgBtn" />
    </div>
    <div class="box6 box" @click="router.push({ path: '/miss' })">
      <img src="/6.png" alt="" class="img6 imgBtn" />
    </div>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
  transform-origin: top left;
}

.bgImg {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.descImg {
  height: 170px;
  position: absolute;
  top: 20px;
  pointer-events: none;
  animation: scaleNode 3s linear infinite alternate;
}

.scImg {
  position: absolute;
  top: 105px;
  left: 0;
  right: 0;
  margin: auto;
  height: 120px;
  width: auto;
  pointer-events: none;
  transform: translateX(5px);
}

.box {
  position: absolute;
  width: 14%;
}

.imgBtn {
  width: 100%;
}
/*左1(左到右，上到下)*/
.box2 {
  transform: translate(-270%, 21%);
}

.box1 {
  transform: translate(-155%, 100%);
}

.box5 {
  transform: translate(-268%, 190%);
}

.box3 {
  width: 16%;
  transform: translate(180%, 35%);
}
.box4 {
  transform: translate(150%, 140%);
}
.box6 {
  display: none;
  transform: translate(319%, 217%);
}

.img1 {
  animation: scaleNode 3s linear infinite alternate;
}

.img2 {
  animation: scaleNode 3s linear 0.2s infinite alternate;
}

.img3 {
  animation: scaleNode 3s linear 1s infinite alternate;
}

.img4 {
  animation: scaleNode 3s linear 0.4s infinite alternate;
}

.img5 {
  animation: scaleNode 3s linear infinite alternate;
}

.img6 {
  animation: scaleNode 3s linear 1s infinite alternate;
}

@keyframes scaleNode {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
</style>
